<template>
  <div class="mains">
    <div class="sxCourse-wrapper">
      <goBack v-show="!hideHeader"></goBack>
      <div :class="['tabs fixedTab', hideHeader ? 'hideHeaderFixedTab' : '']" v-show="showTabs">
        <span @click="tabTopic(index)" :class="tabIndex === index * 1 + 1 ? 'active' : ''" v-for="(item, index) in navList" :key="index">{{ item.topicName }}</span>
      </div>

      <scroller-edit ref="scrollerBottom" lock-x @on-scroll="onScroll">
        <div style="padding-bottom:1rem">
          <div class="scroll-wrapper">
            <!-- banner轮播 -->
            <div class="subtitle flex-h" @click="handleIntoListShow('specialCourses')">
              <span class="flex1">升学教育“1+5+5”课程体系</span>
              <i class="imgIcon"></i>
            </div>
            <div class="swiper-container" id="bannerSwiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide banner-swiper" v-for="(i, index) in bannerList" :key="index" @click="getBatchCommodityTypes(i)">
                  <img class="absss" :src="i.image" />
                </div>
                <span v-if="bannerList.length === 0" class="seatImg" />
              </div>
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination"></div>
            </div>

            <!-- 每周课程专题 -->
            <div class="subtitle flex-h" @click="handleIntoListShow('list')">
              <span class="flex1">精选课程</span>
              <i class="imgIcon"></i>
            </div>

            <div class="swiper-container special-box" id="specialSwiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide special">
                  <div class="special-slide" v-for="item in commodityList" :key="item.id" @click="handleIntoDetail(item)">
                    <img :src="item.cover" alt />
                    <span>
                      <b class="topicName">{{ item.topicName }}</b>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div style="height: 0.2rem; background: #f7f7fa;"></div>
            <!-- 课程 -->
            <div class="tabs" ref="tabOffestHeight">
              <span @click="tabTopic(index)" :class="tabIndex === index * 1 + 1 ? 'active' : ''" v-for="(item, index) in navList" :key="index">{{ item.topicName }}</span>
            </div>
            <div style="padding: 0 0.3rem; box-sizing: boder-box;">
              <div class="subtitle flex-h" v-show="textList.length > 0" style="padding: 0;" @click="goListMore('text', 2)">
                <span class="flex1" style="font-size: 0.4rem;">图文专题</span>
                <div class="flex1" style="text-align: right;">
                  <i class="imgIcon"></i>
                </div>
              </div>
              <courseItem :videoLists="textList"></courseItem>
              <div class="subtitle flex-h" v-show="videoList.length > 0" style="padding: 0;" @click="goListMore('video', 1)">
                <span class="flex1" style="font-size: 0.4rem;">视频专题</span>
                <div class="flex1" style="text-align: right;">
                  <i class="imgIcon"></i>
                </div>
              </div>
              <courseItem :videoLists="videoList"></courseItem>
            </div>
          </div>
        </div>
      </scroller-edit>
    </div>
    <BuyVip :xBuy="showBuyVipModle" :serverName="serverName" @handleCloseBuyDialog="showBuyVipModle = false"></BuyVip>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import Swiper from 'swiper/dist/js/swiper.js'
import { getCommodityTopicPageList, commodityIndex, getBatchCommodityType, getAppCommodityTopic, getAppCommodityTopicInfo, getAppRecommendCommodity } from '~/api/identity'
import ls from 'store2'
import { LoadMore } from 'vux'
import goBack from '~/components/goBack'
import courseItem from './components/courseItem'
import scrollerEdit from '~/components/scrollerEdit'
import BuyVip from '~/components/BuyVip'
// import wxapi from '~/plugins/wxapi.js'
export default {
  components: {
    BuyVip,
    goBack,
    courseItem,
    scrollerEdit,
  },
  created() {},
  data() {
    return {
      navList: [],
      onFetching: false,
      showTabs: false,
      tabIndex: 1,
      videoList: [],
      textList: [],
      showBuyVipModle: false,
      bannerList: [],
      commodityList: [1, 2],
      serverName: '查看专属升学课程',
      hideHeader: false,
      topicId: 0,
      sessionCoureData: {},
    }
  },
  watch: {},
  created() {},
  mounted: function() {
    if (this.commonJs.GetUrlParam('mini_token')) {
      this.hideHeader = true
    }
    this.$visit('CourseHome')
    if (sessionStorage.getItem('sxCourseData')) {
      let sxCourseData = JSON.parse(sessionStorage.getItem('sxCourseData'))
      Object.assign(this.$data, sxCourseData)
      this.$nextTick(function() {
        this.bannerSwip()
        this.specialSwip()
      })
      this.goOtherPage = true
    } else {
      this.getBannerList()
      this.getCommodityTopicPageList()
      this.getTabInfo()
    }
    this.tabsOffsetTop = this.$refs.tabOffestHeight.offsetTop - 40
  },
  beforeRouteLeave(to, from, next) {
    if (ls.get('tokensyxk')) {
      if (this.goOtherPage) {
        sessionStorage.setItem('sxCourseData', JSON.stringify(this.$data))
      }
    }

    next()
  },
  methods: {
    goListMore(status, type) {
      this.$router.push({
        path: '../curriculum/subjectDetail?type=' + type + '&topicId=' + this.topicId,
      })
    },
    getNowTopic(newIndex) {
      switch (newIndex) {
        case 1:
          this.videoList = this.sessionCoureData.videoListOne
          this.textList = this.sessionCoureData.textListOne
          break
        case 2:
          this.videoList = this.sessionCoureData.videoListTwo
          this.textList = this.sessionCoureData.textListTwo
          break
        case 3:
          this.videoList = this.sessionCoureData.videoListThree
          this.textList = this.sessionCoureData.textListThree
          break
        case 4:
          this.videoList = this.sessionCoureData.videoListFour
          this.textList = this.sessionCoureData.textListFour
          break
        default:
          break
      }
    },
    tabTopic(index) {
      this.tabIndex = index * 1 + 1
      let newIndex = index * 1 + 1
      this.topicId = this.navList[index].id
      this.getNowTopic(newIndex)
    },
    newMap(ary, type) {
      let newData = ary.map((item) => {
        return {
          isTopic: true,
          commodityType: type,
          commodityName: item.topicName,
          pics: [item.cover],
          id: item.id,
        }
      })
      return newData
    },
    async getTabInfo() {
      this.$loading('open')
      let tabData = await this.getAppCommodityTopicInfo()
      if (tabData.code === '0') {
        this.navList = tabData.data
      }
      let tabOneData = await this.getAppRecommendCommodity(this.navList[0].id)
      this.topicId = this.navList[this.tabIndex * 1 - 1].id
      if (tabOneData.code === '0') {
        this.sessionCoureData.videoListOne = tabOneData.data.videoTopic
        this.sessionCoureData.textListOne = tabOneData.data.graphicTopic
        this.videoList = tabOneData.data.videoTopic
        this.textList = tabOneData.data.graphicTopic
      }
      this.$hideLoading()
      let tabTwoData = await this.getAppRecommendCommodity(this.navList[1].id)
      if (tabTwoData.code === '0') {
        this.sessionCoureData.videoListTwo = tabTwoData.data.videoTopic
        this.sessionCoureData.textListTwo = tabTwoData.data.graphicTopic
      }
      let tabThreeData = await this.getAppRecommendCommodity(this.navList[2].id)
      if (tabThreeData.code === '0') {
        this.sessionCoureData.videoListThree = tabThreeData.data.videoTopic
        this.sessionCoureData.textListThree = tabThreeData.data.graphicTopic
      }
      let tabFourData = await this.getAppRecommendCommodity(this.navList[3].id)
      if (tabFourData.code === '0') {
        this.sessionCoureData.videoListFour = tabFourData.data.videoTopic
        this.sessionCoureData.textListFour = tabFourData.data.graphicTopic
      }
      switch (this.tabIndex * 1) {
        case 1:
          this.videoList = this.sessionCoureData.videoListOne
          this.textList = this.sessionCoureData.textListOne
          break
        case 2:
          this.videoList = this.sessionCoureData.videoListTwo
          this.textList = this.sessionCoureData.textListTwo
          break
        case 3:
          this.videoList = this.sessionCoureData.videoListThree
          this.textList = this.sessionCoureData.textListThree
          break
        case 4:
          this.videoList = this.sessionCoureData.videoListFour
          this.textList = this.sessionCoureData.textListFour
          break
        default:
          break
      }
      this.goOtherPage = true
    },
    getAppRecommendCommodity(id) {
      //根据id 查询对应主题的专题列表
      let obj = {
        topicId: id,
      }
      return getAppRecommendCommodity(obj)
    },
    getAppCommodityTopicInfo() {
      return getAppCommodityTopicInfo()
      //查询各类别以及id
    },
    handleIntoListShow(uri) {
      if (this.commonJs.GetUrlParam('mini_token')) {
        this.$router.push({
          path: uri,
          query: {
            mini_token: this.commonJs.GetUrlParam('mini_token'),
          },
        })
      } else {
        this.commonJs.gopush(uri)
      }
    },
    getBatchCommodityTypes(item) {
      let str = item.link
      let ids = []
      str = str.split('?id=')
      ids.push(item.id)
      getBatchCommodityType(ids)
        .then((res) => {
          if (res.code == '0') {
            if (this.commonJs.GetUrlParam('mini_token')) {
              if (res.data[0].commodityType === 2) {
                this.commonJs.gopush('videoPlay?id=' + str[1] + '&order=0&mini_token=' + this.commonJs.GetUrlParam('mini_token'))
              } else {
                // this.commonJs.gopush("graphicCourse", str[1]);
                this.$router.push({
                  path: 'graphicCourse',
                  query: {
                    type: str[1],
                    mini_token: this.commonJs.GetUrlParam('mini_token'),
                  },
                })
              }
            } else {
              if (res.data[0].commodityType === 2) {
                this.commonJs.gopush('videoPlay?id=' + str[1] + '&order=0')
              } else {
                this.commonJs.gopush('graphicCourse', str[1])
              }
            }
          }
        })
        .catch((err) => {})
    },
    handleIntoDetail(item) {
      if (this.commonJs.GetUrlParam('mini_token')) {
        const token = this.commonJs.GetUrlParam('mini_token')
        this.commonJs.gopush('detail?id=' + item.id + '&count=' + item.count + '&mini_token=' + token)
      } else {
        this.commonJs.gopush('detail?id=' + item.id + '&count=' + item.count)
      }
    },
    onScroll(e) {
      if (this.$route.query.mini_token) {
        this.showTabs = false
        return
      }
      if (e.top > this.tabsOffsetTop || e.top == this.tabsOffsetTop) {
        this.showTabs = true
      } else {
        this.showTabs = false
      }
    },

    specialSwip() {
      var mySwiper = new Swiper('#specialSwiper', {
        slidesPerView: 'auto',
        mousewheelControl: true,
        freeMode: true,
      })
    },
    clickHot(tids) {
      this.commonJs.gopush('../info/infoDetail', tids)
    },
    bannerSwip() {
      var mySwiper = new Swiper('#bannerSwiper', {
        // direction: 'vertical',
        loop: true,
        autoplay: true,

        autoplay: {
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          bulletElement: 'li',
        },
      })
    },
    getBannerList() {
      commodityIndex()
        .then((res) => {
          this.bannerList = res.data.banners
          this.$nextTick(function() {
            this.bannerSwip()
          })
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
    },

    getCommodityTopicPageList() {
      getCommodityTopicPageList({
        pageNo: 1,
        pageSize: 7,
        recommend: 1,
      })
        .then((res) => {
          this.commodityList = res.data.list
          this.$nextTick(function() {
            this.specialSwip()
          })
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
    },
    //资讯列表
  },
}
</script>

<style scoped lang="less">
.sxCourse-wrapper {
  width: 100%;
  height: 100vh;
  background: white;
  background: white;

  h1 {
    background: #fff;
    z-index: 10;
    position: relative;
    font-size: 0.5rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    line-height: 1.2rem;
    display: block;
    height: 1.2rem;
    padding-left: 0.35rem;
    box-sizing: border-box;
  }
  .scroll-wrapper {
    .banner-swiper {
      img {
        display: block;
        width: 6.9rem;
        height: 3.2rem;
        border-radius: 0.2rem;
        margin: 0.2rem auto 0;
      }
    }
    /deep/.swiper-pagination-bullet {
      width: 0.16rem;
      height: 0.04rem;
      background: rgba(255, 255, 255, 1);
      display: inline-block;
      border-radius: 2px;
    }
    .seatImg {
      display: block;
      width: 6.9rem;
      height: 3.2rem;
      margin: 0.2rem auto 0;
      background: url('~@/static/header.png') no-repeat;
      background-size: 100% 100%;
      border-radius: 0.2rem;
    }
    .nav-box {
      flex-wrap: wrap;
      justify-content: flex-start;
      width: 6.8rem;
      margin: 0.2rem auto;
      //   align-content:stretch;
      .abc {
        width: 1.7rem;
        height: 1.44rem;
        // background: pink;
        img,
        b {
          display: block;
        }
        img {
          width: 0.72rem;
          height: 0.72rem;
          //   background: gray;
          margin: 0.16rem auto 0;
        }
        b {
          font-size: 0.24rem;
          font-family: PingFangSC;
          font-weight: 400;
          color: rgba(34, 34, 34, 1);
          line-height: 0.4rem;
          text-align: center;
        }
      }
    }

    .subtitle {
      padding: 0 0.3rem;
      box-sizing: border-box;
      height: 0.8rem;
      margin: 0.2rem auto;
      span {
        font-size: 0.4rem;
        font-family: PingFangSC;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 0.8rem;
      }
      .imgIcon {
        width: 0.6rem;
        height: 0.6rem;
        display: inline-block;
        background: url('~@/static/sprite/icon_sprites_40.png') -1.95rem -1.05rem;
        background-size: 4.5rem 3.6rem;
      }
    }
    .special-box {
      margin-top: 0.1rem;
      height: 3.4rem;
      overflow: hidden;
      width: 7.5rem;
      padding: 0 0.24rem;
      box-sizing: border-box;
      //   background: cyan;
    }

    .special {
      width: auto;
      height: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;

      .special-slide {
        width: 3rem;
        height: 3.4rem;
        margin-right: 0.3rem;
        float: left;
        // box-shadow: 0px 0.02rem 0.1rem 0px rgba(153, 153, 153, 0.2);
        overflow: hidden;
        img {
          display: block;
          height: 2.3rem;
          width: 100%;
          background: url('~@/static/header.png') no-repeat;
          background-size: 100% 100%;
          border-radius: 0.1rem;
          border: 0;
        }
        span {
          display: block;
          width: 100%;
          height: 1rem;
          padding: 0.05rem 0;
          box-sizing: border-box;
          background: rgba(255, 255, 255, 1);
          //   box-shadow: 0px 0.02rem 0.1rem 0px rgba(153, 153, 153, 0.2);
          //   border-radius: 0px 0px 0.1rem 0.1rem;
          b {
            font-size: 0.3rem;
            font-family: PingFangSC;
            font-weight: 600;
            color: rgba(34, 34, 34, 1);
            line-height: 0.4rem;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }

      .special-slide:nth-last-of-type(1) {
        margin-right: 0;
      }
    }
  }
}
.tabs {
  // padding:  0 0.3rem;
  box-sizing: border-box;
  // margin-top: 1rem;
  margin-bottom: 0.3rem;
  width: 100%;
  height: 1rem;
  background: rgba(255, 255, 255, 1);
  border-bottom: 1px solid rgba(204, 204, 204, 0.3);
  line-height: 1rem;
  padding-left: 0.3rem;
  span {
    font-size: 0.3rem;
    font-family: 'PingFangSC-Semibold', PingFangSC;
    font-weight: 600;
    color: #999999;
    line-height: 0.4rem;
    vertical-align: middle;
    border-right: 0.01rem solid rgba(229, 232, 237, 1);
  }
  span:nth-of-type(1),
  span:nth-of-type(2),
  span:nth-of-type(3) {
    padding-right: 0.32rem;
  }
  span:nth-of-type(2),
  span:nth-of-type(3),
  span:nth-of-type(4) {
    padding-left: 0.32rem;
  }
  span:nth-of-type(4) {
    border-right: none;
  }
  .active {
    color: rgba(34, 34, 34, 1);
  }
}
.fixedTab {
  position: fixed;
  left: 0;
  top: 0.78rem;
  z-index: 102;
}
.hideHeaderFixedTab {
  top: 0;
}
.list {
  width: 100%;
  height: auto;
  padding: 0 0.3rem;
  box-sizing: border-box;
}
</style>
